<template>
  <div v-loading="loading">
    <a-alert message="此配置用于快速上传发布支付宝小程序" type="info" show-icon style="margin:10px 0 20px 15px;" />
    <a-form-model
      ref="alipayForm"
      :rules="alipayRules"
      :model="alipayInfo"
      :labelCol="{ span: 3 }"
      :wrapperCol="{ span: 14 }"
    >
      <a-form-model-item label="支付宝模板token" prop="ali_template_token">
        <a-input v-model="alipayInfo.ali_template_token" type="text" />
      </a-form-model-item>
      <a-form-model-item label="支付宝模板aes_key">
        <div style="display: flex">
          <a-input v-model="alipayInfo.ali_template_aes" type="text" disabled />
          <a-button style="margin-left: 10px" type="primary" @click="createKey">生成key</a-button>
        </div>
      </a-form-model-item>
      <a-form-model-item label="支付宝模板appid" prop="ali_template_appid">
        <a-input v-model="alipayInfo.ali_template_appid" type="text" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-divider style="margin: 0 0 40px 0" />
        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { alipayThirdInfo, saveAlipayThird,creatAliKey } from '@/api/saas/setting'

export default {
  name: 'SaasSettingAliPay',
  data() {
    return {
      loading: false,
      btnLoading: false,
      alipayInfo: {
        ali_template_token: '',
        ali_template_aes: '',
        ali_template_appid: '',
      },
      alipayRules: {
        ali_template_token: [{ required: true, message: '请输入平台Token', trigger: 'blur' }],
        ali_template_aes: [{ required: true, message: '请输入平台加解密Key', trigger: 'blur' }],
        ali_template_appid: [{ required: true, message: '请输入平台手机号', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      alipayThirdInfo({})
        .then((res) => {
          if (res.code == 0) {
            this.alipayInfo = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm() {
      this.$refs.alipayForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          saveAlipayThird(this.alipayInfo)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
    // 生成key
    async createKey() {
      const that = this
      this.$confirm({
        title: '是否生成新的key?',
        okText: '确定',
        cancelText: '取消',
        async onOk() {
          const res = await creatAliKey()
          if (res.code == 0) {
            that.$message.success('生成成功')
            that.alipayInfo.ali_template_aes = res.data
          }
        },
      })
    },
  },
}
</script>

<style scoped>
</style>
